<template>
	<view class=".container">
		<view class="user-info">
			<view class="user-login">
				<view class="photo">
					<open-data type="userAvatarUrl">
					</open-data>
				</view>
				<view class="user-star">
					<view class="user-star-nick">
						<open-data type="userNickName"></open-data>
					</view>
					<view class="flex-row">
						<view class="user-star-notice mrgin-right-ten"
							v-if="notice && !isNull(systemShare) && !isNull(systemShare.wxEatTemplateId)">
							<u-button size="mini" type="warning" :ripple="true" ripple-bg-color="#d4237a"
								@click="noticeMe">吃饭提醒</u-button>
						</view>
						<view class="user-star-notice">
							<u-button v-if="this.isNull(user.cover)" type="success" bindtap="getUserProfile"
								@click="getUserProfile" size="mini">授权登录</u-button>
						</view>
					</view>
				</view>
			</view>
			<view class="flex-column user-btns">
				<!-- 通过rippleBgColor设置水波纹的背景颜色 -->
				<u-button type="error" open-type="share" size="mini" class="margin-top-ten">邀请好友</u-button>
			</view>
		</view>
		<view class="user-money margin-ten">
			<view class="money-info">
				<view class="flex-row data-info">
					<view class="money-star mrgin-right-two"
						v-if="!isNull(systemShare.integralFlag) && systemShare.integralFlag">
						<view class="money">
							<u-count-to :start-val="0" font-size="32" bold="true" :end-val="user.integral"
								color="#ffaa00"></u-count-to>
						</view>
						<view class="title">积分</view>
					</view>
					<view class="money-star" @click="userInvite">
						<view class="money">
							<u-count-to :start-val="0" font-size="32" bold="true" :end-val="user.userTotal"
								color="#2196f3"></u-count-to>
						</view>
						<view class="title">团队</view>
					</view>

				</view>

				<view class="money-star">
					<u-button type="error" open-type="contact" size="mini" :ripple="true" ripple-bg-color="#d4237a">联系客服
					</u-button>
				</view>
			</view>
		</view>

		<view class="system-form margin-ten flex-row">
			<view class="flex-column" @click="getSystem">
				<u-icon name="bell" class="logo" size="50"></u-icon>
				<view class="title">系统介绍</view>
			</view>
			<view class="flex-column" v-show="!isNull(systemShare.wxQr)" @click="viewPhoto(systemShare.wxQr)">
				<u-icon name="man-add" class="logo" size="50"></u-icon>
				<view class="title">交个朋友</view>
			</view>
			<view class="flex-column" v-show="!isNull(systemShare.reward)" @click="viewPhoto(systemShare.reward)">
				<u-icon name="red-packet" class="logo" size="50"></u-icon>
				<view class="title">打赏作者</view>
			</view>
			<view class="flex-column" @click="moreQuan">
				<u-icon name="more-circle" class="logo" size="50"></u-icon>
				<view class="title">隐藏券</view>
			</view>
		</view>

		<button open-type="contact" class="get-member margin-ten flex-row"
			v-if="!isNull(systemShare.integralFlag) && systemShare.integralFlag">
			<image src="../../static/elm-q.png" class="img"></image>
			<image src="../../static/elm-qt.png" class="img"></image>
			<image src="../../static/elm-qe.png" class="img"></image>
			<image src="../../static/mt-qs.png" class="img"></image>
		</button>
		<u-toast ref="uToast" />
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//今日系统订单
				todayOrders: [],
				user: {
					integral: 0,
					userTotal: 0
				},
				notice: false,
				//订单号
				orderNum: null,
				//系统信息
				systemShare: {}
			};
		},
		onLoad() {
			this.getSystemInfo();
		},
		onShow() {
			this.getSystemInfo();
			const authorization = uni.getStorageSync('Authorization');
			if (!this.isNull(authorization)) {
				this.loadUserInfo();
				this.boundParentUser();
			}
		},
		methods: {
			//获取系统信息
			getSystemInfo: function() {
				this.systemShare = uni.getStorageSync("systemShare")
			},
			//查看图片
			viewPhoto: function(image) {
				var imgArr = [];
				imgArr.push(image);
				//预览图片
				uni.previewImage({
					urls: imgArr,
					current: imgArr[0]
				});
			},
			//系统介绍
			getSystem: function() {
				uni.navigateTo({
					url: "../aboutSystem/aboutSystem"
				})
			},
			//更多券
			moreQuan: function() {
				uni.navigateTo({
					url: '../ticket/ticket'
				})
			},
			//获取用户的头像等信息
			onGotUserInfo: function(e) {
				if (this.isNull(e.detail) || this.isNull(e.detail.userInfo)) {
					return;
				}
				const loginUser = e.detail.userInfo;
				const _this = this;
				_this.$u.put('/user/updateInfo', {
					...loginUser,
					nickName: loginUser.nickName,
					cover: loginUser.avatarUrl,
					gender: loginUser.gender
				}, {
					'content-type': 'application/json;charset=UTF-8'
				}).then(res => {
					_this.user.cover = loginUser.avatarUrl
					_this.boundParentUser();
				});
			},
			getUserProfile(e) {
				// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
				const uTips = this.$refs.uTips;
				const _this = this;
				// 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
				wx.getUserProfile({
					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (res) => {
						if (_this.isNull(res.userInfo)) {
							return;
						}
						const loginUser = res.userInfo;
						_this.$u.put('/user/updateInfo', {
							...loginUser,
							nickName: loginUser.nickName,
							cover: loginUser.avatarUrl,
							gender: loginUser.gender
						}, {
							'content-type': 'application/json;charset=UTF-8'
						}).then(res => {
							uTips.show({
								title: '亲~获取积分成功!',
								type: 'error',
								duration: '2300'
							})
							_this.user.cover = loginUser.avatarUrl;
							_this.boundParentUser();
							_this.loadUserInfo();
						});
					},
					fail: function(err) {
						uTips.show({
							title: '亲~授权可获取积分噢!',
							type: 'success',
							duration: '2300'
						})
					}
				})
			},
			//加载用户
			loadUserInfo: function() {
				this.$u.get('/user/getUserInfo').then(res => {
					if (res.code != 200) {
						return;
					}
					this.user = res.data;
					uni.setStorageSync("user", res.data);
					this.notice = !(this.getDay(1) == this.user.noticeEatDay);
				});
			},
			//查看用户邀请的人员列表
			userInvite: function() {
				uni.navigateTo({
					url: '../userInvite/userInvite'
				})
			},
			//分享
			onShareAppMessage(res) {
				return this.getShareInfo();
			},
			//uniapp微信小程序分享页面到微信朋友圈
			onShareTimeline() {
				return this.getShareInfo();
			},

			//提醒我
			noticeMe: function() {
				const user = uni.getStorageSync("user");
				const systemShare = this.systemShare;
				if (this.isNull(user) || this.isNull(systemShare)) {
					return;
				}
				const _this = this;
				const uTips = this.$refs.uTips;
				const uToast = this.$refs.uToast;
				const tempId = systemShare.wxEatTemplateId;
				const tomorrow = this.getDay(1);
				// 获取用户的当前设置，判断是否点击了“总是保持以上，不在询问”
				wx.getSetting({
					withSubscriptions: true, //是否获取用户订阅消息的订阅状态，默认false不返回
					success(res) {
						if (!res.subscriptionsSetting.mainSwitch) {
							uni.openSetting({ // 打开设置页
								success(res) {}
							});
						} else {
							if (tomorrow == user.noticeEatDay) {
								uTips.show({
									title: '明天会提醒主人吃饭!',
									type: 'error',
									duration: '2300'
								})
								return;
							}
							// 用户没有点击“总是保持以上，不再询问”则每次都会调起订阅消息
							uni.requestSubscribeMessage({
								tmplIds: [tempId],
								success(res) {
									if (res[tempId] != "accept") {
										uTips.show({
											title: '主人拒绝了我,明天就没有提醒了噢~',
											type: 'success',
											duration: '2300'
										})
										return;
									}
									// promise方式
									//用户登录获取用户信息
									_this.$u.post('/user/noticeMe', {
										"noticeDay": tomorrow,
										"tempId": tempId
									}, {
										'content-type': 'application/x-www-form-urlencoded;charset=UTF-8'
									}).then(res => {
										if (res.code != 200) {
											return;
										}
										_this.notice = false;
										uTips.show({
											title: '明天会提醒主人吃饭!',
											type: 'error',
											duration: '2300'
										})
									});
								}
							})
						}
					}
				})
			},
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f5f5f5;
	}

	.container {
		display: flex;
		flex-direction: column;
		position: relative;

		.user-info {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			align-content: center;
			background-color: #FFFFFF;
			padding: 0px 15px 15px 15px;


			.user-login {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				align-content: center;

				.photo {
					width: 60px;
					height: 60px;
				}

				.user-star {
					margin-left: 10px;

					.user-star-nick {
						font-size: 17px;
						margin-bottom: 5px;
					}
				}
			}
		}

		.user-money {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			background-color: #FFFFFF;
			padding: 10px;
			border-radius: 6px;
			margin-bottom: 0px;
			box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .06);

			.money-info {
				display: flex;
				flex-direction: row;
				align-items: center;
				align-content: center;
				justify-content: space-between;

				.data-info {
					width: 80%;

					.money-star {
						display: flex;
						flex-direction: column;
						align-items: center;
						align-content: center;

						.money {
							margin-bottom: 5px;
						}

						.title {
							color: #999999;
							font-size: 12px;
						}
					}
				}
			}

			.getMoney {
				margin-top: 15px;
			}
		}



		.system-form {
			flex-wrap: wrap;
			background-color: #FFFFFF;
			padding: 10px;
			border-radius: 5px;
			margin-bottom: 0px;
			box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .06);

			.flex-column {
				width: 25%;
				align-items: center;
				align-content: center;

				.logo {
					margin-bottom: 6px;
				}

				.title {
					font-size: 20rpx;
				}
			}
		}

		.get-member {
			flex-wrap: wrap;
			justify-content: space-between;
			background-color: #FFF;
			padding: 10px 10px 0px 10px;
			border: none solid #FFF;
			box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .06);
			border: none !important;

			.img {
				width: 49%;
				height: 120px;
				margin-bottom: 10px;
			}
		}

		.get-member::after {
			border: none;
		}

		.notice-form {
			display: flex;
			flex-direction: column;
			background-color: #FFF !important;
			padding: 10px;
			border-radius: 5px;
		}
	}
</style>
